<template>
    <sky-card>
        <view class="header-box">
            <view>收货人信息</view>
            <up-icon name="map" color="orange" size="24" @tap="openLocation"></up-icon>
        </view>
        <view class="address-row">
            <view class="label">收货人：</view>
            <view class="value">{{ address.name }}</view>
        </view>
        <view class="address-row">
            <view class="label">手机号码：</view>
            <view class="value">{{ address.mobile }}</view>
        </view>
        <view class="address-row">
            <view class="label">收货地址：</view>
            <view class="value">{{ address.province }}{{ address.city }}{{ address.city }}{{ address.address }}</view>
        </view>
    </sky-card>
</template>
<script setup>
const props = defineProps({
    address: {
        type: Object,
        default: () => {
            return {}
        }
    }
})

const openLocation = () => {
    uni.openLocation({
        name: props.address.name,
        address: props.address.address,
        latitude: Number(props.address.latitude),
        longitude: Number(props.address.longitude),
        success: function () {
            console.log('success');
        },
        fail: function (err) {
            console.log('fail', err);
        },
    });
}
</script>
<style scoped lang="scss">
.header-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2rpx solid #eeeeee;
    padding-bottom: 12rpx;
    margin-bottom: 24rpx;
    font-weight: bold;
}

.address-row {
    display: flex;
    align-items: flex-start;
    gap: 4rpx;
    margin-bottom: 18rpx;
    
    .label {
    
    }
    
    .value {
        flex: 1;
    }
}
</style>
